<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
			<el-form-item label="" prop="product">
				<el-select v-model="queryParams.product" placeholder="所属媒体" clearable>
					<el-option v-for="item in marketList" :key="item.id" :label="item.name" :value="item.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="" prop="mccid">
				<el-select v-model="queryParams.mccid" placeholder="请选择管家账户" clearable>
					<el-option v-for="item in accountList" :key="item.userId" :label="item.userName" :value="item.userId" />
				</el-select>
			</el-form-item>
            <el-form-item label="" prop="id_name">
                <el-input v-model="queryParams.id_name" placeholder="请输入账户名称/ID" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="remark">
                <el-input v-model="queryParams.remark" placeholder="请输入备注信息" clearable style="width: 160px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
      	</el-form>

        <el-row type="flex" class="row-bg mb8" justify="space-between" :gutter="10">
            <el-col :span="1.5"></el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport">下载</el-button>
            </el-col>
        </el-row>
      
        <el-table v-loading="loading" :data="tableList" @sort-change="handleSortChange">
            <el-table-column label="账户名称" prop="username" :show-overflow-tooltip="true" />
            <el-table-column label="账户备注" align="center" prop="remark" :show-overflow-tooltip="true" />
            <el-table-column label="二级媒体" align="center" prop="product_title" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{ scope.row.product_title || ''}}</template>
            </el-table-column>
            <el-table-column label="表单提交成功量" align="center" prop="total_aggrFormSubmitSuccess" width="140" sortable="custom" />
            <el-table-column label="表单提交成功成本" align="center" prop="total_aggrFormSubmitSuccessCost" width="148" sortable="custom" />
            <el-table-column label="购买成功量" align="center" prop="total_ecPaidSuccess" width="110" sortable="custom" />
            <el-table-column label="购买成功成本" align="center" prop="total_ecPaidSuccessCost" width="122" sortable="custom" />
            <el-table-column label="微信加粉成功" align="center" prop="total_weixinFollowSuccessConversions" width="122" sortable="custom" >
                <template slot-scope="scope">
					<el-button type="text" v-if="scope.row.id" @click="goDetail(scope.row)">{{ scope.row.total_weixinFollowSuccessConversions }}</el-button>
                    <span v-else>{{ scope.row.total_weixinFollowSuccessConversions }}</span>
                </template>
            </el-table-column>
            
            <el-table-column label="加粉成功成本" align="center" prop="total_weixinFollowSuccessConversionsCost" width="122" sortable="custom" />
            <el-table-column label="账户ID" align="center" prop="userid" :show-overflow-tooltip="true"/>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.page"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>

<script>
import { getCurDate } from "@/utils/index";
import { getMarket, getAccount, getList } from "@/api/placement";

export default {
data() {
  return {
      loading: true,
      marketList:[],
      accountList:[],
      queryParams: { page: 1, pageSize: 20},
      dateRange: [getCurDate('-'),getCurDate('-')],
      tableList:[],
      total:0,
      statistics:{}//统计数据
  };
},
    created() {
        this.getMarketList()
        this.getAccountList()
        this.getList()
    },
    methods: {
        /** 下拉媒体 */
        getMarketList(){
            getMarket().then(res => {
				this.marketList = res.data
			});
        },
        /** 下拉管家账户 */
        getAccountList(){
            getAccount().then(res => {
				this.accountList = res.data
			});
        },
        getList() {
            this.loading = true;
            this.dateRange = Array.isArray(this.dateRange) ? this.dateRange : [];
			this.queryParams.start_date = this.dateRange[0];
    		this.queryParams.end_date = this.dateRange[1];
            
			getList(this.queryParams).then(res => {
				let data = res.data.data
				let sum = { username:'总计(' + res.data.total + '项)',...res.data.statistics }  
				data.unshift(sum)
				this.tableList = data
				this.total = res.data.total;
				this.loading = false;
			});
        },
        handleSortChange(rows){ 
            this.queryParams.order_by = {
                field:rows.prop,
                sort:rows.order == 'ascending' ? 'asc' : 'desc'
            }
            this.getList()
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.page = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.dateRange = []
            this.handleQuery();
        },
        /** 导出按钮操作 */
        handleExport() {
            let start = '',end = ''
            if(this.dateRange.length){
                start = this.queryParams.start_date.replaceAll('-','')
                end = this.queryParams.end_date.replaceAll('-','')
            }
            this.download('aifanfan/exportMarketExcel', {
                ...this.queryParams
            }, `投放概览【${start}_${end}】.xlsx`)
        },
        goDetail(rows){
			this.$router.push({
				path:'index',
				query: {
                    is_wechat: 1,
                    cctid: rows.userid,
                    startDate : this.dateRange[0],
                    endDate : this.dateRange[1]
                }
			})
		}
    }
};
</script>

